.responses {
  margin: 0 16px;
  display: flex;
  position: relative;
  flex-direction: column;
  border-top-left-radius: 5px;
  border-top-right-radius: 5px;
  border: 1px solid var(--cwc-border-color-dimmed);
  border-bottom: 0px;
  padding-bottom: 5px;
  margin-bottom: calc(5px * -1);
  overflow: hidden;
  background-color: var(--vscode-sideBar-background);

  &:hover {
    border-color: var(--cwc-border-color);
  }

  &__item {
    display: flex;
    position: relative;
    width: 100%;

    & .responses__item__remove-wrapper {
      visibility: hidden;
    }

    &:hover {
      background-color: var(--vscode-list-hoverBackground);

      & .responses__item__remove-wrapper {
        visibility: visible;
      }
    }

    &--selected {
      background-color: var(--vscode-list-inactiveSelectionBackground);
      &:hover {
        background-color: var(--vscode-list-hoverBackground);
      }
    }

    &__content {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 4px;
      padding: 3px 8px;
      width: 100%;
      cursor: pointer;

      &__instructions {
        text-align: left;
        font-size: 12px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;

        &__new-indicator {
          transform: translateY(2px);
          margin-left: -2px;
          font-size: 12px !important;
        }

        &__no-instructions {
          font-style: italic;
          padding-right: 1px;
        }
      }

      &__right {
        display: flex;
        align-items: center;
        gap: 4px;
        flex-shrink: 0;
        font-size: 11px;

        &__date {
          flex-shrink: 0;
          color: var(--vscode-descriptionForeground);
        }

        &__stats {
          display: flex;
          gap: 2px;
          flex-shrink: 0;

          &__added {
            color: var(--vscode-gitDecoration-addedResourceForeground);
          }

          &__removed {
            color: var(--vscode-gitDecoration-deletedResourceForeground);
          }
        }
      }
    }

    &__remove {
      position: absolute;
      display: flex;
      height: 100%;
      align-items: center;
      right: 4px;
      background: linear-gradient(
        to left,
        var(--vscode-list-hoverBackground) 56%,
        transparent
      );
      padding-left: 10px;
      visibility: hidden;
      pointer-events: none;

      &__button {
        display: flex;
        pointer-events: all;

        > span {
          opacity: var(--dimmed-opacity);
        }

        &:hover > span {
          opacity: 1;
        }
      }
    }

    &:hover &__remove {
      visibility: visible;
    }
  }
}
